<template>

    <div>
        <div class="text-right padded10">
            <a-button type="primary" @click="openEditModal">添加系统模块</a-button>
        </div>


        <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 6 }" :data-source="dataSource">
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :title="item.name" :bordered="false">

                    <a-tooltip slot="extra" :title="item.description">

                        <a-icon type="question-circle" class="font-size-16 text-aux"/>
                    </a-tooltip>


                    <div class="box">
                        <p>参数代码: {{item.code}}</p>
                        <p>显示顺序: {{item.sort}}</p>

                    </div>
                    <template slot="actions" class="ant-card-actions">
                        <a @click="openEditModal(item)">编辑</a>
                        <a @click="openParamModal(item)">查看</a>
                        <!--
                                                <a-popconfirm
                                                        :title="`确定要删除模块【${item.name}】的配置信息吗`"
                                                        @confirm="deleteModule(item.id)">
                                                    <a>删除</a>
                                                </a-popconfirm>
                            -->

                    </template>
                </a-card>
            </a-list-item>
        </a-list>


        <ParamModal v-if="ParamModalShow" :record="ParamModalRecord" @closeModal="closeParamModal"/>

        <EditModal v-if="EditModalShow" :record="ModuleEditRecord"

                   @closeModal="closeEditModal"/>
    </div>
</template>
<script>


    import {getModuleList, removeModule} from "../public/http";


    export default {
        components: {
            ParamModal: () => import('./param_item.vue'),
            EditModal: () => import('./param_edit')


        },

        data() {
            return {
                ParamModalShow: false, //查看的分组数据
                ParamModalRecord: {}, //正在编辑的记录
                EditModalShow: false,
                ModuleEditRecord: {},
                dataSource: [],
                loading: false, //表格loading
                schemeRecord: {}, //正在打开的明细数据
                mxModalShow: false, //明细弹窗打开状态
            };
        },

        methods: {

            deleteModule(id) {
                removeModule(id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    res.code === 0 ? this.getTableList() : null;

                })

            },


            //1.0 获取表格数据
            getTableList() {
                this.loading = true;

                getModuleList().then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据

                    }
                });
            },

            openParamModal(record) {

                this.ParamModalRecord = record;
                this.ParamModalShow = true;
            },

            closeParamModal(e) {
                this.ParamModalShow = false;
                this.ParamModalRecord = {};
            },

            openEditModal(record = {}) {
                this.EditModalShow = true
                this.ModuleEditRecord = record
            },
            closeEditModal(e) {
                this.EditModalShow = false;
                this.ModuleEditRecord = {};
                e.render ? this.getTableList() : null;


            },


            //数据初始化
            async init() {
                this.getTableList();
            }

        },
        created() {
            //1.1 获取表格数据
            this.init();
        }

    };
</script>
<style lang="scss" scoped>
    .box {


        p {
            font-weight: 400
        }


    }


</style>